<style>
.group-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
<template>
  <div>
    <Drawer :value="modalState" :closable="false" :title="title" @on-close="cancel" width="35%">
      <Form
        ref="addGroupDrawer"
        :model="form"
        :rules="rules"
        style="margin-left: 80px; margin-top: 30px;"
      >
        <FormItem prop="srname" :label-width="110" label="分组标签名称：" style="width: 300px;">
          <Input v-model="form.srname" type="text" placeholder="请输入分组标签名称"/>
        </FormItem>
        <FormItem prop="joindate" :label-width="110" label="加入日期：" style="width: 300px;">
          <DatePicker
            v-model="form.joindate"
            format="yyyy-MM-dd"
            type="daterange"
            placeholder="请选择加入日期"
            @on-change="handleChange"
          ></DatePicker>
        </FormItem>
        <FormItem prop="sex" :label-width="110" label="性别：" style="width: 300px;">
          <Select v-model="form.sex" placeholder="请选择性别">
            <Option value="all">全部</Option>
            <Option value="0">女</Option>
            <Option value="1">男</Option>
          </Select>
        </FormItem>

        <FormItem prop="gid" :label-width="110" label="意向商品：" style="width: 300px;">
          <Select v-model="form.gid">
            <Option value="all">全部</Option>
            <Option v-for="item in goodsList" :value="item.id.toString()" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>

        <FormItem :label-width="110" prop="uid" label="签约销售：" style="width: 300px;">
          <Select v-model="form.uid">
            <Option value="0">全部</Option>
            <Option v-for="item in nameList" :value="item.id" :key="item.id">{{ item.uname }}</Option>
          </Select>
        </FormItem>
        <FormItem :label-width="110" prop="state0" label="跟踪状态：" style="width: 300px;">
          <Select v-model="form.state0">
            <Option value="all">全部</Option>
            <Option value="0">有效</Option>
            <Option value="1">流失</Option>
          </Select>
        </FormItem>
        <FormItem :label-width="110" prop="state" label="状态：" style="width: 300px;">
          <Select v-model="form.state">
            <Option value="all">全部</Option>
            <Option value="0">未预约</Option>
            <Option value="1">已预约</Option>
            <Option value="2">未到访</Option>
            <Option value="3">已到店</Option>
            <Option value="4">已签约</Option>
            <Option value="5">已退款</Option>
          </Select>
        </FormItem>
        <FormItem
          :label-width="110"
          v-show="form.state === '4'"
          prop="tprice"
          label="签约金额："
          style="width: 540px;"
        >
          <Row>
            <Col span="11" style="margin-right: 5px;">
              <Select v-model="form.moneystate">
                <Option value=">">></Option>
                <Option value="=">=</Option>
              </Select>
            </Col>
            <Col span="11">
              <Input v-model="form.signmoney" type="text" placeholder="请输入签约金额"/>
            </Col>
          </Row>
        </FormItem>
        <Row style="width: 525px;">
          <Col span="14">
            <FormItem :label-width="110" prop="repeat" label="重复客户：" style="width: 300px;">
              <Select v-model="form.repeat">
                <Option value="all">无</Option>
                <Option value="3">多次到店</Option>
                <Option value="4">多次购买</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem prop="count" style="width: 203px;" v-if="this.form.repeat !== 'all'">
              <Input v-model="form.count" type="text" placeholder="请输入次数(大于1)"/>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="group-drawer-footer">
        <Button style="margin-right: 8px" @click="cancel">取消</Button>
        <Button type="primary" @click="handleSubmit">保存</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'AddGroupDrawer',
  data () {
    const validateCount = (rule, value, callback) => {
      if (value <= '1') {
        callback(new Error('请输入大于1的整数'))
      } else {
        callback()
      }
    }

    const validateDate = (rule, value, callback) => {
      const start = value[0]
      const end = value[1]
      if (start === '' && end === '') {
        callback(new Error('请选择加入日期！'))
      } else {
        callback()
      }
    }
    return {
      title: '',
      loading: true,
      form: {
        srname: '',
        sex: 'all',
        gid: 'all',
        joindate: '',
        uid: '0',
        state0: 'all',
        state: 'all',
        moneystate: '',
        signmoney: '',
        tprice: '',
        repeat: 'all',
        count: ''
      },
      rules: {
        srname: [
          {
            required: true,
            message: '标签名称不能为空',
            trigger: 'blur'
          }
        ],
        // sex: [
        //   {
        //     required: true,
        //     message: '请选择性别',
        //     trigger: 'change'
        //   }
        // ],
        // gid: [
        //   {
        //     required: true,
        //     message: '请选择意向商品',
        //     trigger: 'change'
        //   }
        // ],
        joindate: [
          {
            validator: validateDate,
            trigger: 'change'
          }
        ],
        count: [
          {
            validator: validateCount,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  updated () {
    this.title = '创建标签'
    if (this.form.repeat === 'all') {
      this.form.count = ''
    }
  },
  computed: {
    ...mapState({
      modalState: state => state.modal.addGroupDrawerState,
      nameList: state => state.user.nameList,
      goodsList: state => state.goodService.goodsList
    })
  },
  methods: {
    ...mapActions(['updateAddGroupDrawerState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$refs['addGroupDrawer'].validate(valid => {
        if (valid) {
          // console.log(this.form.uid)
          this.$emit('group-valid', {
            addGroupDrawer: this.$refs['addGroupDrawer'],
            srname: this.form.srname,
            joindate: this.form.joindate,
            uid: this.form.uid ? parseInt(this.form.uid) : '',
            state0:
              this.form.state0 && this.form.state0 !== 'all'
                ? parseInt(this.form.state0)
                : '',
            state:
              this.form.state && this.form.state !== 'all'
                ? parseInt(this.form.state)
                : '',
            sex:
              this.form.sex && this.form.sex !== 'all'
                ? parseInt(this.form.sex)
                : '',
            gid:
              this.form.gid && this.form.gid !== 'all'
                ? parseInt(this.form.gid)
                : '',
            tprice:
              this.form.state === '5'
                ? `${this.form.moneystate}${this.form.signmoney}`
                : '',
            repeat:
              this.form.repeat && this.form.repeat !== 'all'
                ? parseInt(this.form.repeat)
                : '',
            count:
              this.form.repeat && this.form.repeat !== 'all'
                ? parseInt(this.form.count)
                : '',
            name:
              this.form.uid !== '0'
                ? this.nameList.filter(item => item.id === this.form.uid)[0]
                  .uname
                : '全部'
            // moneystate: this.form.state === '5' ? this.form.moneystate : '',
            // signmoney: this.form.state === '5' ? this.form.signmoney : ''
          })
          // this.$refs['addGroupDrawer'].resetFields()
        }
      })
    },
    cancel () {
      this.updateAddGroupDrawerState(false)
      this.$refs['addGroupDrawer'].resetFields()
    },
    handleChange (value) {
      this.form.joindate = value
    }
  }
}
</script>
